import { useState } from 'react';
import './index.css';

/**
 * 颜色加深函数
 * @param {string} hex - 十六进制颜色值
 * @param {number} percent - 加深的百分比（0-1之间）
 * @returns {string} 加深后的十六进制颜色值
 */
const darkenColor = (hex, percent) => {
  // 处理颜色值，移除#前缀
  let color = hex.startsWith('#') ? hex.slice(1) : hex;
  // 处理3位简写颜色值
  if (color.length === 3) {
    color = color
      .split('')
      .map(c => c + c)
      .join('');
  }
  // 将十六进制转换为十进制
  const num = parseInt(color, 16);
  // 提取RGB分量
  let r = (num >> 16) & 0xff;
  let g = (num >> 8) & 0xff;
  let b = num & 0xff;
  // 计算加深后的RGB值
  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));
  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));
  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));
  // 将RGB转回十六进制
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
};

/**
 * 文件夹组件
 * @param {Object} props - 组件属性
 * @param {string} props.color - 文件夹颜色，默认为#00d8ff
 * @param {number} props.size - 文件夹大小缩放比例，默认为1
 * @param {Array} props.items - 文件夹中的项目数组
 * @param {string} props.className - 额外的CSS类名
 */
const Folder = ({ color = '#00d8ff', size = 1, items = [], className = '' }) => {
  // 设置文件夹中最多显示的项目数
  const maxItems = 3;
  // 处理items数组，确保最多显示maxItems个项目，不足则用null填充
  const papers = items.slice(0, maxItems);
  while (papers.length < maxItems) {
    papers.push(null);
  }

  // 状态管理：文件夹是否打开
  const [open, setOpen] = useState(false);
  // 状态管理：纸张的偏移量，用于实现磁吸效果
  const [paperOffsets, setPaperOffsets] = useState(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));

  // 计算文件夹和纸张的颜色
  const folderBackColor = darkenColor(color, 0.08); // 文件夹背面颜色
  const paper1 = darkenColor('#ffffff', 0.02); // 第一张纸的颜色
  const paper2 = darkenColor('#ffffff', 0.04); // 第二张纸的颜色
  const paper3 = '#ffffff'; // 第三张纸的颜色

  /**
   * 处理文件夹点击事件
   * 切换文件夹的打开/关闭状态
   * 关闭时重置纸张偏移量
   */
  const handleClick = () => {
    setOpen(prev => !prev);
    if (open) {
      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));
    }
  };

  /**
   * 处理纸张鼠标移动事件
   * 实现磁吸效果：纸张会跟随鼠标移动，但移动幅度较小
   * @param {Event} e - 鼠标事件对象
   * @param {number} index - 纸张索引
   */
  const handlePaperMouseMove = (e, index) => {
    if (!open) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    // 计算偏移量，乘以0.15使移动幅度更小
    const offsetX = (e.clientX - centerX) * 0.15;
    const offsetY = (e.clientY - centerY) * 0.15;
    setPaperOffsets(prev => {
      const newOffsets = [...prev];
      newOffsets[index] = { x: offsetX, y: offsetY };
      return newOffsets;
    });
  };

  /**
   * 处理纸张鼠标离开事件
   * 重置纸张偏移量
   * @param {Event} e - 鼠标事件对象
   * @param {number} index - 纸张索引
   */
  const handlePaperMouseLeave = (e, index) => {
    setPaperOffsets(prev => {
      const newOffsets = [...prev];
      newOffsets[index] = { x: 0, y: 0 };
      return newOffsets;
    });
  };

  // 设置文件夹的CSS变量
  const folderStyle = {
    '--folder-color': color,
    '--folder-back-color': folderBackColor,
    '--paper-1': paper1,
    '--paper-2': paper2,
    '--paper-3': paper3,
  };

  // 设置文件夹的缩放比例
  const scaleStyle = { transform: `scale(${size})` };

  return (
    <div style={scaleStyle} className={className}>
      <div className={`folder open`} style={folderStyle}>
        <div className="folder__back">
          {/* 渲染纸张 */}
          {papers.map((item, i) => (
            <div
              key={i}
              className={`paper paper-${i + 1}`}
              onMouseMove={e => handlePaperMouseMove(e, i)}
              onMouseLeave={e => handlePaperMouseLeave(e, i)}
            >
              {item}
            </div>
          ))}
          {/* 文件夹正面 */}
          <div className="folder__front"></div>
          <div className="folder__front right"></div>
        </div>
      </div>
    </div>
  );
};

export default Folder;
